<template>
    <view class="content">
        <a-demo title="基础使用">
            <view :class="[arrowPosition, isShrink ? 'pure-prev-next-shrink' : '']">
                <pure-swiper
                    :list="list"
                    :current="current6"
                    @change="(e) => (current6 = e.detail.current)">
                    <template #arrow>
                        <pure-prev-next
                            @prev="handlePrev6"
                            @next="handleNext6"
                            :count="list.length"
                            :current="current6"></pure-prev-next>
                    </template>
                </pure-swiper>
            </view>
        </a-demo>

        <a-demo title="收缩布局">
            <pure-cell icon="/static/icons/button.png" title="切换按钮收缩布局" arrow>
                <template #desc>
                    <pure-switch v-model="isShrink"></pure-switch>
                </template>
            </pure-cell>
        </a-demo>

        <a-demo title="按钮位置">
            <pure-radio-group v-model="arrowPosition">
                <pure-radio
                    v-for="radio in arrowPositions"
                    :value="radio.value"
                    :label="radio.label"
                    :key="radio.value"></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="静态模式">
            <view class="pure-prev-next-static pure-prev-next-center-bottom pure-prev-next-shrink">
                <pure-swiper
                    :list="list"
                    :current="current6"
                    @change="(e) => (current6 = e.detail.current)">
                    <template #arrow>
                        <pure-prev-next
                            @prev="handlePrev6"
                            @next="handleNext6"
                            :count="list.length"
                            :current="current6"></pure-prev-next>
                    </template>
                </pure-swiper>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 数据
    const list = ref([
        { title: "第二项", src: "/static/placeholder.jpg", title: "第一项标题" },
        { title: "第三项", src: "/static/placeholder.jpg", title: "第二项标题" },
        { title: "第四项", src: "/static/placeholder.jpg", title: "第三项标题" },
    ]);
    const current6 = ref(0);

    // 切换按钮位置
    const arrowPositions = ref([
        { label: "顶部", value: "pure-prev-next-top" },
        { label: "居中", value: "pure-prev-next-middle" },
        { label: "底部", value: "pure-prev-next-bottom" },
        { label: "左上", value: "pure-prev-next-left-top" },
        { label: "左下", value: "pure-prev-next-left-bottom" },
        { label: "右上", value: "pure-prev-next-right-top" },
        { label: "右下", value: "pure-prev-next-right-bottom" },
        { label: "中上", value: "pure-prev-next-center-top" },
        { label: "中下", value: "pure-prev-next-center-bottom" },
    ]);
    const arrowPosition = ref("pure-prev-next-middle");
    const isShrink = ref(false);

    // 上一个
    function handlePrev6(index) {
        console.log("上一个", index);
        current6.value = index;
    }

    // 下一个
    function handleNext6(index) {
        console.log("下一个", index);
        current6.value = index;
    }
</script>

<style scoped></style>
